<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
    <style>
        #chart1 {
            width: 1000px;
            height: 800px;
            margin: 0 auto; /* 水平居中 */
            display: flex; /* 使用 Flexbox */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            border: 1px solid #ccc; /* 可选，为容器添加边框 */
        }
    </style>
</head>
<body>

<div id="chart1"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script>
    // 正常节点的获取
    let chartdom = document.getElementById('chart1');
    // 转化为echarts的对象节点
    let myChart = echarts.init(chartdom); // 确保这里使用了正确的变量名
    // 数据的配置
    //柱状图
    let option = {
        tooltip: {
            trigger: 'item', // 触发类型：数据项触发
            formatter: '{a} <br/>{b} : {c}' // 显示内容
        },
        xAxis: {
            type: 'category',
            data: ['临沂市', '威海市', '泰安市', '济南市', '济宁市', '淄博市', '潍坊市', '烟台市', '菏泽市', '青岛市']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '访问量',
                type: 'bar',
                data: [8860, 8810, 11290, 16400, 9400, 8400, 8310, 9640, 5460, 21260],
                itemStyle: {
                    color: '#ADD8E6', // 柱状图平常显示颜色为浅蓝色
                    emphasis: {
                        color: '#00ffff' // 鼠标放上去以后颜色加深为深蓝色
                    }
                }
            }
        ]
    };

    // 确保使用正确的变量名来调用 setOption 方法
    myChart.setOption(option);





</script>
</body>
</html>